<template>
  <div id="CollegeRanking">
    <div class="ranking-type df f12">
      <div style="color: #9b9b9b">排名类型</div>
      <div
        class="rank-item curr"
        :class="{ isActive: active == index }"
        @click="handleActive(item, index)"
        v-for="(item, index) in rankingType"
        :key="item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { getRankInfoFilter } from '@/api/searchColleges/searchCollege';
import { onMounted, ref } from 'vue';
const emits = defineEmits(['handleFetchRankFullInfo']);
const rankingType = ref([]);
const active = ref(0);
// 排名筛选条件
const fetchRankInfoFilter = () => {
  getRankInfoFilter().then((res) => {
    if (res.data.code == 20000) {
      rankingType.value = res.data.data;
    }
  });
};
const handleActive = (item, index) => {
  emits('handleFetchRankFullInfo', item);
  active.value = index;
};
onMounted(() => {
  fetchRankInfoFilter();
});
</script>

<style lang="scss" scoped>
#CollegeRanking {
  .ranking-type {
    margin: 20px 0;
    .rank-item {
      margin: 0 10px;
      padding: 2px 5px;
      border-radius: 4px;
      background-color: transparent;
    }
  }
}
.isActive {
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
</style>
